<template>
  <div class="horv-sreen-layout groundc">
    <div class="layout-content">
      <div class="layout-content-left">
        <moduleCollapseTable
          height="9.2rem"
          :data="appHealthData"
          :activeKey="activeKey"
          @row-click="rowClick"
        ></moduleCollapseTable>
      </div>
      <div class="layout-content-right">
        <moduleWorkOrder
          height="3.25rem"
          v-bind="workData"
          :top="60"
          :color="[
            '#2175DB',
            '#57C5FF',
            '#00B675',
            '#EDC600',
            '#FF9F0A',
            '#E22E2E',
            '#BF5AF2',
            '#F25A9D',
          ]"
          :isShow="false"
          :chartType="chartType"
          title="应用工单TOP5"
        ></moduleWorkOrder>
        <moduleWorkOrder
          height="2.94rem"
          title="应用需求平均停留天数"
          class="module-demand-days"
          v-bind="traceData"
          :chartType="chartType"
          :isShow="false"
          :color="['#2175DB', '#00B675', '#EDC600']"
        ></moduleWorkOrder>
        <moduleAppDefects
          height="2.7rem"
          style="margin-top: 0.16rem"
          :appDefectData="appDefectData"
          :chartType="chartType"
          :pieWidth="230"
          :pieHeight="230"
        ></moduleAppDefects>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, reactive } from "vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import moduleHeader from "@/components/vpt-base-header-1002/index.vue";
import moduleCollapseTable from "./components/collapse-table/index.vue";
import moduleWorkOrder from "./components/module-work-order/index.vue";
import moduleDemandDays from "./components/demand-days/index.vue";
import moduleAppDefects from "./components/app-defects/index.vue";
// import { demandDateTime } from "@/api/mockApi/largescree.js";
import { getAppDefectData } from "@/api/mockApi/application.js";
import { data } from "./index.js";
import {
  getAppHealthData,
  demandDateTime,
  getAppWorkData,
} from "@/api/mockApi/construction.js";
import { useRouter } from "vue-router";
import { addThousandsSeparator } from "@/utils/formatter.js";
import { buttonGroup } from "@/router/data.js";

const router = useRouter();

// const buttonGroup = ref([
//   { id: 1, name: "总览", path: "/", disabled: false },
//   { id: 2, name: "基础设施监控", path: "/infrastructure", disabled: false },
//   { id: 3, name: "应用监控", path: "/application", disabled: false },
// ]);

const appHealthData = ref([]);
const activeKey = ref([]);
const chartType = ref("init");
const workData = reactive({
  barData: [],
});

const traceData = reactive({
  barData: [],
});

const handleMenu = (item) => {
  router.push({ path: item.path });
};

// 获取应用健康数据
const getAppHealth = (params = {}) => {
  getAppHealthData(params).then((res) => {
    appHealthData.value = res.data && res.data.length ? res.data : [];
    activeKey.value = [];
    appHealthData.value.forEach((item) => {
      activeKey.value.push(item.project_name);
      item.data_info = JSON.parse(item.data_info);
      item.name = `${
        item.project_name
      }\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0健康级别：${
        item.project_status
      }\u00A0\u00A0\u00A0|\u00A0\u00A0\u00A0负责人：${
        item.charge_per ? item.charge_per : "-"
      }`;
      item.data_info.forEach((el) => {
        el.title = "\u00A0\u00A0\u00A0\u00A0\u00A0" + el.title;
        el.finish_count = addThousandsSeparator(el.finish_count);
        el.bugs_num = addThousandsSeparator(el.bugs_num);
        el.bug_over_num = addThousandsSeparator(el.bug_over_num);
        el.bug_wc_num = addThousandsSeparator(el.bug_wc_num);
        el.over_count = addThousandsSeparator(el.over_count);
        el.xq_num = addThousandsSeparator(el.xq_num);
      });
    });
  });
};

// 应用工单TOP10
const getAppWork = (params) => {
  getAppWorkData(params).then((res) => {
    workData.barData = res.data && res.data.length ? res.data : [];
  });
};

// 需求停留平均天数
const getDemandDateTime = (params = {}) => {
  demandDateTime(params).then((res) => {
    traceData.barData = res.data && res.data.length ? res.data : [];
  });
};

const appDefectData = ref([]);

// 缺陷饼图数据
const getAppDefect = (params = {}) => {
  getAppDefectData(params).then((res) => {
    appDefectData.value = res.data;
  });
};

//列表行点击事件
const rowClick = (value) => {
  chartType.value = "update";
  getDemandDateTime({ iterate_id: value.iterate_id });
  getAppDefect({ iterate_id: value.iterate_id });
  getAppWork({ name: value.name });
};

onMounted(() => {
  getAppHealth();
  getAppWork();
  getDemandDateTime();
  getAppDefect();
});
</script>

<style lang="less" scoped>
.groundc {
  background: #f2f3f5;
}
.arco-collapse-item-content {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.layout-content {
  display: flex;
  padding: 0.2rem;
  padding-bottom: 0;
  // padding-right: 0;
  .layout-content-left {
    background: #fff;
    width: 12.98rem;
    margin-right: 0.16rem;
    .app-table {
      margin-top: 0.2rem;
    }
  }
  .layout-content-right {
    flex: 1;
    // width: 5.62rem;
  }
  .module-demand-days {
    margin-top: 0.16rem;
  }
}
</style>
